<style>
#logger {
	height: 200px;
	overflow-y: auto;
}

#performance-msg {
	position: absolute;
	top: 20px;
	border: 2px solid orange;
	color: orange;
	background: #111;
	padding: 0.3em;
	right: 150px;
	display: none;
}
</style>
<div id="performance-msg">
	Your browser does not have
	<var>performance.now()</var>
	function. So you have to feel out the timings :(
</div>
<strong>Logger: </strong>
<ul id="logger"></ul>
<div id="editor1" ></div>

<script>
	var logger = document.getElementById( 'logger' ),
		hasPerformance = window.performance && window.performance.now,
		editor = CKEDITOR.replace( 'editor1', {
		on: {
			instanceReady: function() {
				var lastTime = null,
					textWatcher = new CKEDITOR.plugins.textWatcher( editor, function( selectionRange ) {
						var now = hasPerformance ? performance.now() : null,
							matchEl = document.createElement( 'li' );

						if ( lastTime === null ) {
							lastTime = now;
						}

						matchEl.innerText = hasPerformance ? 'Delta: ' + ( now - lastTime ) + 'ms, ' : '';
						matchEl.innerText += 'Text: ' + selectionRange.startContainer.getText();
						logger.appendChild( matchEl );

						lastTime = now;

						// Throttling set slightly higher than expected due to https://github.com/ckeditor/ckeditor4/pull/2001#discussion_r194047585.
					}, 2002 );

				textWatcher.attach();
			}
		}
	} );

	if ( !hasPerformance ) {
		CKEDITOR.document.getById( 'performance-msg' ).setStyle( 'display', 'block' );
	}
</script>
